<template>
  <div id="equipmentFilter">
    <div class="title">
      <!-- <div class="moreVideo" @click="moreVideos">更多视频</div> -->
    </div>
    <div class="search">
      <el-row style="margin: 20px 0" :gutter="20">
        <el-col :span="8">
          <el-select
            placeholder="系统名称"
            clearable
            @clear="clearSystemName"
            @change="dataFilter"
            v-model="selectedSys"
            style="width: 100%"
          >
            <el-option
              v-for="item in systems"
              :label="item.label"
              :value="item.value"
              :key="item.value"
            ></el-option>
          </el-select>
        </el-col>
        <el-col :span="8">
          <el-select
            placeholder="楼层"
            clearable
            @clear="clearLcName"
            @change="dataFilter"
            v-model="loucengVal"
            style="width: 100%"
          >
            <el-option
              v-for="item in louceng"
              :label="item.label"
              :value="item.value"
              :key="item.value"
            ></el-option>
          </el-select>
        </el-col>
      </el-row>
      <el-input
        placeholder="输入关键字进行过滤"
        v-model="filterText"
        style="margin: 0 0 20px 10px; width: 780px"
      ></el-input>
    </div>
    <div class="content tree-container">
      <el-tree
        class="tree filter-tree"
        show-checkbox
        :data="temData"
        empty-text="当前数据为空"
        :props="defaultProps"
        @node-click="clickNode"
        @check="check"
        node-key="id"
        :filter-node-method="filterNode"
        :default-expanded-keys="[1]"
        ref="tree"
      >
        <span class="custom-tree-node" slot-scope="{ node, data }">
          <span
            class="other"
            :class="{
              all: node.label == '全部设备',
              treecommon:
                node.label == '视频监控' ||
                node.label == '门禁管理' ||
                node.label == '电子巡更' ||
                node.label == '停车系统' ||
                node.label == '紧急求助' ||
                node.label == '公共广播' ||
                node.label == '信息发布' ||
                node.label == '楼控系统' ||
                node.label == '消防系统' ||
                node.label == '亮化系统' ||
                node.label == '电梯系统' ||
                node.label == '人脸识别系统' ||
                node.label == '变配电系统'
            }"
          >
            {{ node.label }}
          </span>
        </span>
      </el-tree>
    </div>
  </div>
</template>
<script>
import { TUVector3, TURotator, TUVector2 } from "tumap/dist/tumap.v1.8.js";
import axios from "axios";
export default {
  data() {
    return {
      filterText: "",
      data: [],
      isFirst: true,
      temData: undefined,
      selectedSys: undefined,
      loucengVal: undefined,
      quyuVal: undefined,
      systems: [
        { label: "视频监控", value: "视频监控" },
        { label: "门禁管理", value: "门禁管理" },
        { label: "电子巡更", value: "电子巡更" },
        { label: "紧急求助", value: "紧急求助" },
        { label: "消防系统", value: "消防系统" }
      ],
      louceng: [
        { label: "全部", value: "全部" },
        { label: "6F", value: "6F" },
        { label: "5F", value: "5F" },
        { label: "4F", value: "4F" },
        { label: "3F", value: "3F" },
        { label: "2F", value: "2F" },
        { label: "1F", value: "1F" },
        { label: "B1", value: "B1" },
        { label: "B2", value: "B2" }
      ],
      defaultProps: {
        children: "children",
        label: "label"
      },
      pathObj: null,
      temLc: ""
    };
  },
  mounted() {
    var tem = JSON.parse(window.sessionStorage.getItem("treeData"));
    var newChildren = [];
    for (var i = 0; i < this.systems.length; i++) {
      var systemItem = this.systems[i];
      for (var j = 0; j < tem[0].children.length; j++) {
        var temDataItem = tem[0].children[j];
        if (systemItem.label == temDataItem.label) {
          newChildren.push(temDataItem);
        }
      }
    }
    tem[0].children = newChildren;
    this.temData = tem;
    this.data = JSON.parse(JSON.stringify(tem));
  },
  watch: {
    filterText(val) {
      this.$refs.tree.filter(val);
    }
  },

  methods: {
    getType(ele) {
      var image = "";
      ele == "视频" &&
        (image = window.ipUrl + "qy/static/images/popups/videoCommon.png");
      ele == "门禁" &&
        (image = window.ipUrl + "qy/static/images/popups/accessCommon.png");
      ele == "巡更" &&
        (image = window.ipUrl + "qy/static/images/popups/dzxgCommon.png");
      ele == "停车系统" &&
        (image = window.ipUrl + "qy/static/images/popups/dzxgCommon.png");
      ele == "紧急求助" &&
        (image = window.ipUrl + "qy/static/images/popups/jjqzCommon.png");
      ele == "广播" &&
        (image = window.ipUrl + "qy/static/images/popups/gbCommon.png");
      ele == "信息发布" &&
        (image = window.ipUrl + "qy/static/images/popups/xxfbCommon.png");
      ele == "暖通" &&
        (image = window.ipUrl + "qy/static/images/popups/ntCommon.png");
      ele == "消防" &&
        (image = window.ipUrl + "qy/static/images/popups/fireCommon.png");
      ele == "照明" &&
        (image = window.ipUrl + "qy/static/images/popups/zmCommon.png");
      ele == "电梯" &&
        (image = window.ipUrl + "qy/static/images/popups/dtCommon.png");
      ele == "变配电" &&
        (image = window.ipUrl + "qy/static/images/popups/bpdCommon.png");
      ele == "入侵" &&
        (image = window.ipUrl + "qy/static/images/popups/invadeCommon.png");
      return image;
    },
    moreVideos() {
      window.showVidwoWall();
    },
    filterNode(value, data) {
      if (!value) return true;
      return data.label.indexOf(value) !== -1;
    },

    // 筛选符合要求的数据
    dataFilter(data) {
      if(data == '全部'){
        this.clearLcName();
        return
      }
      this.temData = JSON.parse(JSON.stringify(this.data));
      if (!this.loucengVal && !this.selectedSys) {
        return;
      }
      var tem = [];
      if (this.selectedSys !== undefined) {
        this.treeForeach(this.temData, node => {
          if (node.label == this.selectedSys) {
            tem.push(node);
          }
        });
        this.temData = tem;
        tem = [];
      }
      if (this.loucengVal !== undefined) {
        this.treeForeach(this.temData, node => {
          if (node.label == this.loucengVal) {
            tem.push(node);
          }
        });
        this.temData = tem;
        tem = [];
      }
    },

    // 清除筛选结果
    clearSystemName() {
      this.selectedSys = undefined;
      this.dataFilter();
    },
    clearLcName() {
      this.loucengVal = undefined;
      this.dataFilter();
    },
    // 树的广度遍历
    treeForeach(tree, func) {
      let node,
        list = [...tree];
      while ((node = list.shift())) {
        func(node);
        node.children && list.push(...node.children);
      }
    },
    changeLc(lc) {
      window.UEReset();
      window.creatLabel(lc);
      switch (lc) {
        case "1F":
          window.Sgworld.execute("grapi", "ShowBuilding", { num: 1 }, null);
          break;
        case "2F":
          window.Sgworld.execute("grapi", "ShowBuilding", { num: 2 }, null);
          break;
        case "3F":
          window.Sgworld.execute("grapi", "ShowBuilding", { num: 3 }, null);
          break;
        case "4F":
          window.Sgworld.execute("grapi", "ShowBuilding", { num: 4 }, null);
          break;
        case "5F":
          window.Sgworld.execute("grapi", "ShowBuilding", { num: 5 }, null);
          break;
        case "6F":
          window.Sgworld.execute("grapi", "ShowBuilding", { num: 6 }, null);
          break;
        case "B1":
          window.Sgworld.execute("grapi", "ShowBuilding", { num: "B1" }, null);
          break;
        case "B2":
          window.Sgworld.execute("grapi", "ShowBuilding", { num: "B2" }, null);
          break;
        case "全部":
          window.Sgworld.execute("grapi", "ShowBuilding", { num: 7 }, null);
          lc = undefined;
          break;
        default:
          break;
      }
    },
    // 节点点击事件
    clickNode(data) {
      var newX = data.position.x;
      var newY = data.position.y;
      var newZ = data.position.z;
      var newRoll, newPitch, newYaw;
      var params = {
        name: data.code,
        location: new TUVector3(newX, newY, newZ),
        rotate: -45
      };
      // 从校验后的位置中取值
      axios.get("./static/json/PositionCalibration.json").then(res => {
        var positionCalibrationData = res.data;
        var res = positionCalibrationData.find(item => {
          return item.name === data.code;
        });
        // 若当前点击的节点在校验文件中
        // 从校验文件中取值，并通过focusOn方法定位
        if (res) {
          newRoll = res.degree && res.degree.roll;
          newPitch = res.degree && res.degree.pitch;
          newYaw = res.degree && res.degree.yaw;
          window.Sgworld.focusOn(
            new TUVector3(newX, newY, newZ),
            new TURotator(newRoll, newPitch, newYaw),
            200,
            () => {},
            2
          );
        } else {// 当前点击的不在校验文件中 通过 设备名称进行定位
          window.Sgworld.execute("grapi", "AIPawnLocation", params, null);
        }
      });
    },
    check(data) {
      var lcarr = ["1F", "2F", "3F", "4F", "5F", "6F", "B1", "B2"];
      // 获取当前楼层
      var lc = data.label;
      if (lcarr.includes(lc)) {
        this.temLc = lc;
      }else{
          this.temLc = '7F'
        }
      try {
        window.Sgworld.clearAllCovering();
        // var timetype = window.sessionStorage.getItem("timeType");
        // var weathertype = window.sessionStorage.getItem("weatherType");
        // window.Sgworld.execute("grapi", "settime", { type: timetype }, null);
        // window.Sgworld.execute(
        //   "grapi",
        //   "setweather",
        //   { type: weathertype },
        //   null
        // );
        this.changeLc(this.temLc);
      } catch (error) {
        console.log(error);
      }
      // 获取当前选中的节点
      var checkNodes = this.$refs.tree.getCheckedNodes();
      if (checkNodes.length == 0) {
        window.UEReset();
      }
      // 根据code值进行节点过滤
      checkNodes = checkNodes.filter(item => {
        return item.code;
      });
      // var image = this.getType(data.rootType);
      var lineArr = [];
      if (data.rootType == "视频") {
        for (var i = 0; i < checkNodes.length; i++) {
          var item = checkNodes[i];
          var ITEM = {};
          ITEM.x = item.position.x;
          ITEM.y = item.position.y;
          ITEM.z = item.position.z;
          ITEM.scale = 0.3;
          ITEM.name =
            data.rootType +
            "-" +
            item.floorId +
            "_" +
            item.id +
            "-" +
            item.label;
          ITEM.id = item.floorId + "_" + item.id;
          ITEM.image = this.getType(item.rootType);
          window.Sgworld.createBillboard(ITEM);
        }
      } else if (data.rootType == "巡更") {
        this.changeLc(lc);
        for (var i = 0; i < checkNodes.length; i++) {
          var item = checkNodes[i];
          item.x = item.position.x;
          item.y = item.position.y;
          item.z = item.position.z;
          item.scale = 0.3;
          item.name =
            data.rootType +
            "-" +
            item.floorId +
            "_" +
            item.id +
            "-" +
            item.label;
          item.id = item.floorId + "_" + item.id;
          item.image = this.getType(item.rootType);
          if (item.position) {
            var tempoi = new TUVector3(
              item.position.x,
              item.position.y,
              item.position.z
            );
            lineArr.push(tempoi);
          }
          window.Sgworld.createBillboard(item);
        }
        this.pathObj = window.Sgworld.createPolyline({
          data: lineArr,
          pathWidth: 80,
          type: 2, //0高亮线 1三角 2箭头
          pathColor: "#0DBC79"
        });
        this.pathObj.show(true);
      } else {
        for (var i = 0; i < checkNodes.length; i++) {
          var item = {};
          item.x = checkNodes[i].position.x;
          item.y = checkNodes[i].position.y;
          item.z = checkNodes[i].position.z;
          item.scale = 0.3;
          item.name =
            data.rootType +
            "-" +
            checkNodes[i].floorId +
            "-" +
            checkNodes[i].code;
          item.id = checkNodes[i].floorId + "_" + checkNodes[i].id;
          item.image = this.getType(checkNodes[i].rootType);
          window.Sgworld.createBillboard(item);
        }
      }
      window.UEGetAll();
    }
  }
};
</script>
<style scoped>
#equipmentFilter {
  color: white;
  height: 2144px;
  background: url("../../../../../static/images/leftBackground.png") !important;
  background-position: center;
  background-repeat: no-repeat;
  background-size: 100% 100%;
  padding: 5px 68px;
}
.title {
  width: 507px;
  height: 114px;
  background: url("../../../../../static/images/equipment/equipmentFilter.png");
  background-position: center;
  background-repeat: no-repeat;
  background-size: 100% 100%;
  margin-bottom: 10px;
  margin-left: -30px;
}
.moreVideo {
  position: absolute;
  top: 40px;
  right: 100px;
  font-size: 30px;
}
.moreVideo:hover {
  color: rgb(231, 124, 124);
  cursor: pointer;
}
.search {
  width: 800px;
}
.content {
  width: 842px;
  margin-left: -56px;
  height: 1600px;
  overflow: auto;
}
.el-tree {
  background: transparent;
  color: white;
  transform: rotateY(0);
}
.el-tree /deep/ .el-tree-node__content {
  background-color: transparent !important;
}
.el-tree /deep/ .el-tree-node__content:hover {
  background-color: rgba(0, 160, 233, 0.2) !important;
}
.el-tree /deep/ .is-current > .el-tree-node__content {
  /* background-color: rgba(0, 160, 233, 0.2) !important; */
  background-color: transparent !important;
}
.tree /deep/ .el-tree-node {
  position: relative;
  padding-left: 60px;
}

.tree /deep/ .el-tree-node__children {
  padding-left: 60px;
}

.tree /deep/ .el-tree-node :last-child:before {
  height: 38px;
}

.tree /deep/ .el-tree > .el-tree-node:before {
  border-left: none;
}

.tree-container /deep/ .el-tree > .el-tree-node:after {
  border-top: none;
}

.tree /deep/ .el-tree-node:before {
  content: "";
  left: -4px;
  position: absolute;
  right: auto;
  border-width: 1px;
}

.tree /deep/ .el-tree-node:after {
  content: "";
  left: -4px;
  position: absolute;
  right: auto;
  border-width: 1px;
}
.tree /deep/ .el-tree-node__expand-icon.is-leaf {
  display: none;
}

/* 树添加连接线 */
.tree /deep/ .el-tree-node:before {
  border-left: 2px solid #00aeff;
  bottom: 0px;
  height: 100%;
  top: -8px;
  width: 1px;
}

.tree /deep/ .el-tree-node:after {
  border-top: 2px solid #00aeff;
  height: 20px;
  top: 30px;
  width: 82px;
}

/* 修改树节点的文字大小 */
.tree /deep/ .el-tree-node__label {
  font-size: 36px;
  color: white;
}
/* 修改树节点的高度 */
.tree /deep/ .el-tree-node__content {
  height: 60px;
}
/* 修改下拉选箭头的大小 */
.tree /deep/ .el-tree-node__expand-icon {
  font-size: 36px;
}
.tree /deep/ .el-tree-node__expand-icon.expanded {
  -webkit-transform: rotate(0deg);
  transform: rotate(0deg);
}
.tree /deep/ .el-icon-caret-right:before {
  width: 44px;
  height: 44px;
  display: block;
  background: url("../../../../../static/images/equipment/zk.png") !important;
  background-position: center;
  background-repeat: no-repeat;
  background-size: 100% 100%;
  content: "";
}
.tree /deep/ .el-tree-node__expand-icon.expanded.el-icon-caret-right:before {
  width: 44px;
  height: 44px;
  display: block;
  background: url("../../../../../static/images/equipment/zd.png") !important;
  background-position: center;
  background-repeat: no-repeat;
  background-size: 100% 100%;
  content: "";
}
/* 复选框的大小调整 */
.tree /deep/ .el-checkbox__inner {
  width: 30px;
  height: 30px;
  background: #00446f;
  border: 1px solid #00a0e9;
}
/* 复选框中的勾选 */
.tree /deep/ .el-checkbox__inner::after {
  height: 14px;
  width: 6px;
  left: 8px;
  border: 2px solid white;
  border-left: none;
  border-top: none;
}
/* 设置节点背景色 */
.treecommon {
  height: 50px;
  line-height: 50px;
  text-align: left !important;
  width: 200px !important;
  background: rgba(0, 86, 153, 0.35) !important;
  border-top-left-radius: 25px;
  border-bottom-left-radius: 25px;
}
.other {
  font-size: 30px;
  /* width: 250px; */
  text-align: center !important;
  display: inline-block;
  background: rgba(11, 73, 143, 0.34);
}
.all {
  width: 200px !important;
  height: 60px;
  line-height: 60px;
  text-align: center !important;
  border-top-left-radius: 30px;
  border-bottom-left-radius: 30px;
  background: #005699 !important;
}

/* 输入框和下拉选的样式调整 */
.el-select /deep/ .el-input__inner {
  background-color: rgba(22, 46, 145, 0.5);
  border: 1px solid #409eff;
  border-radius: 0;
  height: 58px;
  color: white;
  font-size: 25px;
}

.el-select /deep/ .el-select-dropdown {
  background-color: rgba(22, 46, 145, 0.5);
  border: 1px solid #409eff;
}
.el-select /deep/ .el-select-dropdown__item {
  color: white;
  margin: 1px 2px;
}
.el-select
  /deep/
  .el-select-dropdown.is-multiple
  .el-select-dropdown__item.selected {
  background-color: rgba(6, 33, 81, 0.67);
  border: 1px solid #00aeff;
}
.el-select /deep/ .el-select-dropdown__item.hover,
.el-select /deep/ .el-select-dropdown__item:hover {
  background-color: rgba(6, 33, 81, 0.67);
  border: 1px solid #00aeff;
}
.el-select
  /deep/
  .el-select-dropdown.is-multiple
  .el-select-dropdown__item.selected.hover {
  background-color: rgba(6, 33, 81, 0.67);
  border: 1px solid #00aeff;
}
.el-select /deep/ .el-popper[x-placement^="bottom"] .popper__arrow::after {
  border-bottom-color: rgba(6, 33, 81, 0.67);
}
.el-select /deep/ .el-select-dropdown__list {
  padding: 1px;
}
.el-input /deep/ .el-input__inner {
  height: 58px;
  background-color: rgba(6, 33, 81, 0.67);
  border-radius: 0;
  border: none;
  color: white;
  font-size: 25px;
  border: 1px solid #00aeff;
}
.el-tree /deep/ .el-tree__empty-text {
  font-size: 32px;
  color: white;
}
</style>
